<template>
    <div class="content-card">
        <p @click.stop="toggleShow">
            <span>{{title}}</span>
            <i class="fa pull-right" :class="[show ? 'el-icon-arrow-up' : 'el-icon-arrow-down']" @click.stop="toggleShow"></i>
        </p>
        <transition name="slide-fade">
            <slot v-if="show"></slot>
        </transition>
    </div>
</template>

<script>
  export default {
    name: "content-card",
    props: ['title'],
    data () {
      return {
        show: true
      }
    },
    methods: {
      toggleShow () {
        this.show = !this.show
      }
    },
    watch: {
      show (value) {
        if (value) {
          this.$emit('show')
        }
      }
    }
  }
</script>

<style scoped lang="scss">
    .content-card {
        overflow: hidden;
        /*padding: 0 20px 20px 20px;*/
        p {
            font-size: 24px;
            border-bottom: 1px solid #c1c4c6;
            font-weight: 600;
            margin-bottom: 10px;
            cursor: pointer;
            span {
                display: inline-block;
                padding-bottom: 10px;
                border-bottom: 2px solid #ffce17;
                color: #09825b;
                font-size: 16px;
            }
            .fa {
                cursor: pointer;
            }
        }
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .5s ease .1s;
    }

    .slide-fade-leave-active {
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateY(-30px);
        opacity: 0;
    }

    .pull-right {
        float: right;
    }
</style>
